<template>
  <div class="body">
    <header class="header">
      <div class="title">
        <img src="../../assets/images/01_11.png" alt="" class="img_zuo" @click="back" />
        <div>{{super11}}点位巡查</div>
      </div>
    </header>
    <div class="main">
      <div class="item" v-for="(item, index) in list" :key="index" @click="through(item,index)"
        v-if="item.list.length>0">
        <div class="item_title item_title2" v-if="item.list[0].isWorkingDa==1 && item.list[0].isEnd==0">
          {{item.list[0].title}}</div>
        <div class="item_title1 item_title2" v-else>{{item.list[0].title}}</div>
        <div class="item_wee">{{item.list[0].wee}}</div>
        <div class="item_ti"><span>{{item.list[0].ti}}</span><span>点位数：{{item.list[0].dws}}</span></div>
        <div class="gouprent bg_hui" v-if="item.list[0].isEnd!=0">
          <img src="../../assets/images/dwxc/ditu_list_gou.png" alt="" class="img_gougou">
          <div class="ywc">已完成</div>
        </div>
        <div v-else :id="'ditu'+(index+'')" class="bg_hui" :class="{'ditu':item.list[0].isEnd==0}"
          :data-isend="item.list[0].isEnd">

        </div>

      </div>
      <!-- <div class="item">
        <div class="item_title1 item_title2">遇见</div>
        <div class="item_wee">周一</div>
        <div class="item_ti"><span>19:20-20:30</span><span>点位数：4</span></div>
        <div id="ditu" class="bg_hui">
          <div class="gouprent">
            <img src="../../assets/images/dwxc/ditu_list_gou.png" alt="" class="img_gougou">
            <div class="ywc">已完成</div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="item_title item_title2">遇见</div>
        <div class="item_wee">周一</div>
        <div class="item_ti"><span>19:20-20:30</span><span>点位数：4</span></div>
        <div id="ditu" class="bg_hui"></div>
      </div>
      <div class="item">
        <div class="item_title1 item_title2">遇见</div>
        <div class="item_wee">周一</div>
        <div class="item_ti"><span>19:20-20:30</span><span>点位数：4</span></div>
        <div id="ditu" class="bg_hui"></div>
      </div> -->



    </div>

    <div class="tk" v-show="tk_isShow">
      <div class="bg"></div>
      <div class="tk-box">
        <div class="tk-item">
          <div class="left ">请选择工作人员</div>
          <div class="right">
            <img class="close" src="../../assets/images/dwxc/tk_x.png" @click="tk_x" />
          </div>
        </div>
        <div class="tk_body">
          <div class="tk-item" v-for="(item, index) in peopleList" :key="index" @click="Chooser(item,index)">
            <div class="left" :class="{'active':active_people.indexOf(item.userid) !=-1}">{{item.userName}}</div>
          </div>
          <!-- <div class="tk-item">
            <div class="left">张三</div>
          </div>
          <div class="tk-item">
            <div class="left">张三</div>
          </div>
          <div class="tk-item">
            <div class="left">张三</div>
          </div>
          <div class="tk-item">
            <div class="left">张三</div>
          </div>
          <div class="tk-item">
            <div class="left">张三</div>
          </div> -->

        </div>
        <div class="tk-item btns btn_1">
          <button class="btn " type="button" @click="btn">开始巡查</button>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import qs from 'qs';
  export default {
    name: 'dwxc_4_maplist',
    data() {
      return {
        list: null,
        map: null,
        maps: [],
        centralpoint: ["106.57", "29.55"],//中心点
        path: [
          // ["106.57", "29.55"], [106.572122, 29.551176], [106.577271, 29.552501], [106.578258, 29.554600]
        ],
        marker_list: [],
        tk_isShow: false,
        userid: null,
        peopleList: [],
        active_people: [],
        map_dataid: null,
        super11: '',
        name: '',
        list_index: '',
        isqieye: null,//是否是企业
      }
    },
    mounted() {
      var _this = this;
    },

    //进入该页面时，用之前保存的滚动位置赋值
    methods: {
      inof1() {//获取列表
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log("plus问题");
        }
        var params = {
          userId: this.userid,
        }
        this.axios
          .post(
            `${this.$global_msg.Url.host}/DotPlacePatrol/getSpotInspectionMapList`, qs.stringify(params)
          )
          .then((res) => {
            try {
              plus.nativeUI.closeWaiting();
            } catch (e) {
              console.log("plus问题");
            }
            console.log("列表", res);
            if (res.data.code == 200) {
              this.list = res.data.rows.spotInspectionMapListMethod
              this.isqieye = res.data.rows.data.permission

            } else {
              this.$toast(res.data.msg);
            }
          }).catch(err=>{
              this.$terminal._error(err)
          })
      },
      inof2() {//获取人列表
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log("plus问题");
        }
        var params = {
          dwId: this.userid,
          phone: localStorage.getItem("phone")
        }
        this.axios
          .post(
            `${this.$global_msg.Url.host}/DotPlacePatrol/getUserList`, qs.stringify(params)
          )
          .then((res) => {
            try {
              plus.nativeUI.closeWaiting();
            } catch (e) {
              console.log("plus问题");
            }
            console.log("人：", res);
            if (res.data.code == 200) {
              this.peopleList = res.data.rows


            } else {
              this.$toast(res.data.msg);
            }
          });
      },
      addpeople() {//添加人列表
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log("plus问题");
        }
        var params = {
          userId: this.userid,
          dataId: this.map_dataid,
          userIds: this.active_people.join(","),
          dataIdType: 1,
        }
        this.axios
          .post(
            `${this.$global_msg.Url.host}/DotPlacePatrol/addSpotInspectionRecord`, qs.stringify(params)
          )
          .then((res) => {
            try {
              plus.nativeUI.closeWaiting();
            } catch (e) {
              console.log("plus问题");
            }
            console.log("人：", res);
            if (res.data.code == 200) {
              var parent = {
                'name': this.name,
                'path': "/dwxc_4_maplist"
              }
              localStorage.setItem("dwxc_5_back", JSON.stringify(parent))
              localStorage.setItem("dwxc_4_maplist_mapdataid", res.data.rows)
              // if (this.list_index != '') {
              //   this.list_index.list[0].SrDataid = res.data.rows
              // }
              this.list[this.list_index].list[0].SrDataid = res.data.rows

              $("html").css("overflow", "auto");
              $("body").css("overflow", "auto");
              this.$router.push("/dwxc_5_inspectionpoint");
            } else {
              this.$toast(res.data.msg);
            }
          });
      },


      tk_x() {
        this.tk_isShow = false
 
        $("html").css("overflow", "auto");
        $("body").css("overflow", "auto");
      },
      btn() {
        this.tk_isShow = false
        this.addpeople()
      },
      //  返回
      back() {
        // this.$router.push("/dwxc_1_calendar");
        this.$router.back()
      },
      through(item, index) {
        // this.tk_isShow=true
        // console.log(item)

        this.name = item.list[0].title
        console.log(item.list[0].userId)
        console.log("item.list[0].SrDataid", item.list[0].SrDataid)
        this.map_dataid = item.list[0].dataid
        if (document.documentElement && document.documentElement.scrollTop) {
          var t = document.documentElement.scrollTop;

        } else if (document.body) {
          var t = document.body.scrollTop;
        }

        sessionStorage.setItem("dwxc_4_scroll", t)
        // sessionStorage.setItem("dwxc_4_maplist_dataid",item.list[0].SrDataid)
        if (item.list[0].isEnd == 0) {//是否完成
          // item.list[0].isWorkingDa==1

          if (this.isqieye != 4 && item.list[0].isWorkingDa != 1) { return false }

          if (this.userid == item.list[0].adduserid) {
            if (item.list[0].SrDataid != undefined) {//是否第一次 不是
              var parent = {
                'name': item.list[0].title,
                'path': "/dwxc_4_maplist"
              }
              localStorage.setItem("dwxc_5_back", JSON.stringify(parent))
              localStorage.setItem("dwxc_4_maplist_mapdataid", item.list[0].SrDataid)
              this.$router.push("/dwxc_5_inspectionpoint");
            } else {
              this.list_index = index
              this.tk_isShow = true

              $("html").css("overflow", "hidden");
              $("body").css("overflow", "hidden");
            }
          } else {
            this.list_index = index
            this.tk_isShow = true

            $("html").css("overflow", "hidden");
            $("body").css("overflow", "hidden");
          }



        } else {
          var parent = {
            'name': item.list[0].title,
            'path': "/dwxc_4_maplist"
          }
          localStorage.setItem("dwxc_7_dataid", item.list[0].SrDataid)
          localStorage.setItem("dwxc_7_back", JSON.stringify(parent))
          this.$router.push("/dwxc_7_trajectories");
        }

      },
      addmap() {
        var _this = this
        this.maps = []
        for (let i = 0; i < this.list.length; i++) {
          if (this.list[i].list[0].isEnd != 1) {
            let name = "ditu" + i
            _this.inof(name, _this.list[i], i)
          } else {
            this.maps.push(1)
          }
        }
      },
      inof(name, obj, i) {
        // console.log(obj)
        // 创建地图
        var map = new AMap.Map(name, {
          resizeEnable: true,
          zoomEnable: true, //地图是否可缩放，默认值为true
        });

        // // 设置中心点
        map.setCenter(this.centralpoint);
        // // 设置地图级别 // PC上，参数zoom可设范围：[3,18]；// 移动端：参数zoom可设范围：[3,19]
        map.setZoom(15);
        this.maps.push(map)
        this.mapmarker(obj, i)
        // this.mapline(obj)
      },
      mapmarker(obj, i) {//创建坐标点
        // console.log("mapk===========")
        var _this = this
        var img_url = require('../../assets/images/dwxc/dwpc_19.gif');
        var content = '';
        var marker = null;
        this.maps[i].setCenter(obj.list[0].jwd.split(","));
        var path_1 = []
        obj.list.forEach(item => {
          content = '';
          content += '<div style="text-align:center;margin-top: -0.2222rem;margin-left: -0.1111rem;">';
          content += '<img style="width: 0.6019rem;" src="' + img_url + '"/>';
          content += '<div>' + item.address + '</div>'
          content += '</div>';

          marker = new AMap.Marker({ // 创建一个 Marker 实例：
            position: item.jwd.split(","),// 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            content: content,//图片
          });
          // _this.marker_list.push(marker)

          _this.maps[i].add(marker);

          path_1.push(item.jwd.split(","))

        });
        // console.log(path_1)
        this.path[i] = path_1
        this.mapline(i)



        // 设置点标记的动画效果，此处为弹跳效果
        //marker.setAnimation('AMAP_ANIMATION_BOUNCE');
        // 将创建的点标记添加到已有的地图实例：
        //marker.dataObj = obj;


        // marker.dataObj = obj;
        // marker.on('click', function (o) {
        //   console.log(o)
        //   //_this.map.remove(o.target);
        //   _this.look(o.target.dataObj);
        // });
      },
      mapline(i) {
        // 创建折线实例
        // console.log(this.path[i])
        var polyline = new AMap.Polyline({
          path: this.path[i],
          borderWeight: 1, // 线条宽度，默认为 1
          strokeColor: '#FFB401', // 线条颜色
          lineJoin: 'round' // 折线拐点连接处样式
        });

        // 将折线添加至地图实例
        this.maps[i].add(polyline);
      },
      Chooser(item) {//选择人
        console.log(this.active_people.indexOf(item.userid))
        if (this.active_people.indexOf(item.userid) != -1) {
          this.active_people.splice(this.active_people.indexOf(item.userid), 1)
        } else {
          this.active_people.push(item.userid)
        }
      },

    },
    created() {
      // this.userid = localStorage.getItem("userId")
      // this.inof1()
      // this.inof2()
      // console.log(6 % 7)
    },
    watch: {
      list: function () {
        var _this = this
        this.$nextTick(function () {
          /////你需要调用的方法
          _this.addmap()
        });
      }
    },
    activated() {
      setTimeout(() => {
        this.$nextTick(() => {
          // document.querySelector('#app').scrollTop = this.offsetTop;
          $(window).scrollTop(sessionStorage.getItem("dwxc_4_scroll"))
        });
      }, 10)
    },
    beforeRouteEnter(to, from, next) {
      next((vm) => {
        vm.$nextTick(function () {
          console.log(to)
          console.log(from)
          vm.active_people = [];
          if (from.path == "/dwxc_1_calendar") {
            vm.maps = []
            vm.list = []
            vm.super11 = localStorage.getItem("super")
            vm.userid = localStorage.getItem("userId")
            vm.inof1();
            vm.inof2();
            console.log(111)
          } else {
            console.log("222")
            // console.log(vm.list)
            vm.inof1();

            // $(window).scrollTop(sessionStorage.getItem("dwxc_4_scroll"))
            // window.scrollTo(0,sessionStorage.getItem("dwxc_4_scroll"));
          }
        });

      });
    }

  }
</script>

<style scoped>
  /* 头部 */
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    width: 100%;
    z-index: 20;
    font-size: 0.388888rem;
    position: fixed;
    top: 0;
    left: 0;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }

  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }

  .img_jia {
    width: 0.4444rem;
    position: absolute;
    right: 0.3704rem;
  }

  /* main */
  .main {
    margin-top: 1.8519rem;
    padding: 0 0.1481rem;
    padding-top: 0.0185rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .item {
    width: 4.7222rem;
    /* height: 4.037rem; */
    margin-top: 0.2593rem;
    background-color: #fff;
  }



  .item_title {
    height: 0.6852rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #7AC0FE;
    font-size: 0.3889rem;
    color: #fff;
  }

  .item_title1 {
    height: 0.6852rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #A1A1A1;
    font-size: 0.3889rem;
    color: #fff;
  }

  .item>div:last-child {
    height: 3.2407rem;
    background: #fff;
  }

  .mask {
    width: 100%;
    background: transparent;
  }

  .item_wee {
    text-align: center;
    font-size: 0.2778rem;
    background-color: #EBEBEB;
    border-bottom: 1Px solid #DBDBDB;
    line-height: 0.5556rem;
  }

  .item_ti {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.2778rem;
    background-color: #EBEBEB;
    border-bottom: 1Px solid #DBDBDB;
    line-height: 0.5556rem;
    padding: 0 0.1852rem;

  }

  .item_ti>span {
    font-size: 0.2778rem;
  }

  .bg_hui {
    background-color: #CBCBCB !important;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  .img_gougou {
    width: 1.1852rem;
    height: 1.1852rem;
  }

  .ywc {
    width: 100%;
    font-size: 0.4815rem;
  }

  .gouprent {
    text-align: center;
  }


  /* 弹框 */
  .tk {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tk-hide {
    display: none !important;
  }

  .tk .bg {
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 101;
  }

  .tk .tk-box {
    width: 8.333333rem;
    height: auto;
    background-color: #FFFFFF;
    z-index: 102;
    border-radius: 0.222222rem;
  }

  .tk .tk-item {
    width: auto;
    height: 1.388888rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px #DDDDDD solid;
    margin-left: 0.333333rem;
    margin-right: 0.333333rem;
  }

  /* .tk .tk-item:last-child {
			border: none;
		} */

  .tk .tk-item .left {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 0.3889rem;
    margin-right: 0.1852rem;
  }

  .tk .tk-item .right {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .tk .tk-item .right input {
    width: 100%;
    height: 100%;
    border: none;
    margin: 0;
    padding: 0;
    text-align: right;
  }

  .tk .tk-item .close {
    width: 0.37037rem;
    height: 0.37037rem;
  }

  .tk .date-piker {
    justify-content: space-between;
  }

  .tk .date-piker button {
    width: 3.777777rem;
    height: 1.055555rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .tk .date-piker button img {
    width: 0.444444rem;
    height: 0.444444rem;
  }

  .tk .btns {
    height: 1.5741rem;
    justify-content: center;
  }

  .tk .btns .btn {
    width: 3.648148rem;
    height: 1.0741rem;
    background-color: #2B6CFE;
    color: #fff;
    border-radius: 0.1111rem;
    font-size: 0.3889rem;
  }

  input::placeholder {
    color: #B1B1B1;
    font-size: 0.3889rem;
  }

  .img_r {
    width: 0.1852rem;
    height: 0.3426rem;
  }

  .tk_body {
    max-height: 6.9444rem;
    overflow-y: auto;
    /* padding-bottom: 10px; */
  }

  .active {
    color: #2877FE;
  }

  .tk .tishi {
    display: none;
    padding: 0.3333rem;
    font-size: 0.3889rem;
    height: auto;
    padding-bottom: 0.5556rem;
  }
</style>